<template>
  <div class="resources">
    <Header title="交通路况"></Header>
    <Nav></Nav>
    <!-- 地图右侧列表 -->
    <div class="map-right-box">
      <router-link to :class="{active:isActive==0}">
        <img src="@/assets/images/map-right-road.png" alt />
        <img class="active" src="@/assets/images/map-right-roadA.png" alt />
        路况
      </router-link>
      <router-link to="flow" :class="{active:isActive==1}">
        <img src="@/assets/images/map-right-flow.png" alt />
        <img class="active" src="@/assets/images/map-right-flowA.png" alt />
        客流
      </router-link>
      <router-link to="weather" :class="{active:isActive==2}">
        <img src="@/assets/images/map-right-weather.png" alt />
        <img class="active" src="@/assets/images/map-right-weatherA.png" alt />
        气象
      </router-link>
      <router-link to="report" :class="{active:isActive==3}">
        <img src="@/assets/images/map-right-report.png" alt />
        <img class="active" src="@/assets/images/map-right-reportA.png" alt />
        上报
      </router-link>
    </div>
    <!-- 路况 -->
    <div class="map-road-nav">
      <span>拥堵</span>
      <span>缓行</span>
      <span>畅通</span>
      <span @click="showModal">路况信息</span>
    </div>
    <van-popup v-model="isShow">
      <div class="map-road-info">
        <h3>路况信息</h3>
        <div class="road-info-item">
          <div class="info-item-left">
            <img src="@/assets/images/road-control.png" alt />道路管制
          </div>
          <div class="info-item-right">
            共0条
            <van-icon name="arrow" />
          </div>
        </div>
        <div class="road-info-item">
          <div class="info-item-left">
            <img src="@/assets/images/road-traffic.png" alt />交通事件
          </div>
          <div class="info-item-right">
            共0条
            <van-icon name="arrow" />
          </div>
        </div>
        <div class="road-info-item">
          <div class="info-item-left">
            <img src="@/assets/images/road-toll-station.png" alt />收费站管制
          </div>
          <div class="info-item-right" @click="showList">
            共6条
            <van-icon :name="iconName" />
          </div>
        </div>
        <div class="info-item-list" v-show="isShowList==true">
          <p>
            <em>1.通许东收费站</em>
            <span>大广高速（G5）开封至通许端段双向管制中</span>
          </p>
          <p>
            <em>2.通许东收费站</em>
            <span>大广高速（G5）开封至通许端段双向管制中</span>
          </p>
          <p>
            <em>3.通许东收费站</em>
            <span>大广高速（G5）开封至通许端段双向管制中</span>
          </p>
          <p>
            <em>4.通许东收费站</em>
            <span>大广高速（G5）开封至通许端段双向管制中</span>
          </p>
          <p>
            <em>5.通许东收费站</em>
            <span>大广高速（G5）开封至通许端段双向管制中</span>
          </p>
          <p>
            <em>6.通许东收费站</em>
            <span>大广高速（G5）开封至通许端段双向管制中</span>
          </p>
        </div>
        <div class="road-info-item">
          <div class="info-item-left">
            <img src="@/assets/images/road-work.png" alt />养护施工
          </div>
          <div class="info-item-right">
            共0条
            <van-icon name="arrow" />
          </div>
        </div>
      </div>
    </van-popup>

    <baidu-map
      class="map"
      :center="center"
      :zoom="zoom"
      :scroll-wheel-zoom="true"
      :double-click-zoom="false"
    >
      <bm-traffic :predictDate="{weekday: 7, hour: 12}">
      </bm-traffic>
      <bm-marker
        :position="position"
        :dragging="true"
        :icon="{url:iconUrl, size: {width: 26, height:32}}"
      ></bm-marker>
    </baidu-map>
  </div>
</template>

<script>
// @ is an alias to /src
import Header from "@/components/Header/Header.vue";
import Nav from "@/components/Nav/Nav.vue";
import marker from "@/assets/images/marker.png";
export default {
  name: "road",
  components: {
    Header,
    Nav
  },
  data() {
    return {
      center: { lng: 113.027975, lat: 34.51921 },
      zoom: 10,
      // marker
      position: { lng: 113.023268, lat: 34.535448 },
      iconUrl: marker,
      // 地图右侧列表 是否选中 0路况 1客流  2气象  3上报
      isActive: 0,
      // 弹层是否显示
      isShow: false,
      // 右侧箭头 arrow 向右    arrow-down 向下
      iconName: "arrow-down",
      isShowList: true
    };
  },
  methods: {
    showModal() {
      this.isShow = true;
    },
    showList() {
      if (this.isShowList) {
        this.isShowList = false;
        this.iconName = "arrow";
      } else {
        this.isShowList = true;
        this.iconName = "arrow-down";
      }
    }
  }
};
</script>
<style lang="less" scope>
.resources {
  position: relative;
  width: 100%;
  min-height: 100vh;
  box-sizing: border-box;
}

.map {
  width: 100%;
  height: 100vh;
}
.map-road-nav {
  position: absolute;
  top: 118/7.5vw;
  left: 10/7.5vw;
  z-index: 100;
  > span {
    display: inline-block;
    margin-right: 20/7.5vw;
    padding: 0 12/7.5vw;
    font-size: 28/7.5vw;
    border-radius: 4/7.5vw;
    color: #fff;
    // font-weight: bold;
    &:nth-of-type(1) {
      background-color: #de0303;
    }
    &:nth-of-type(2) {
      background-color: #ff9600;
    }
    &:nth-of-type(3) {
      background-color: #07c160;
    }
    &:nth-of-type(4) {
      background-color: #999999;
    }
  }
}

.map-road-info {
  h3 {
    padding: 0 20/7.5vw;
    font-size: 36/7.5vw;
    line-height: 72/7.5vw;
    border-bottom: 1px solid #f2f2f2;
  }
  .road-info-item {
    padding: 0 20/7.5vw;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 28/7.5vw;
    height: 72/7.5vw;
    border-bottom: 1px solid #f2f2f2;
    .info-item-left {
      color: #333;
      img {
        width: 32/7.5vw;
        margin-right: 10/7.5vw;
        vertical-align: middle;
      }
    }
    .info-item-right {
      color: #666;
      i {
        vertical-align: middle;
        color: #666;
        margin-left: 5/7.5vw;
      }
    }
  }
  .info-item-list {
    padding: 0 20/7.5vw;
    border-bottom: 1px solid #f2f2f2;
    p {
      line-height: 45/7.5vw;
      font-size: 28/7.5vw;
      color: #666;
      padding: 10/7.5vw 0;
      > em {
        display: inline-block;
        vertical-align: middle;
        width: 200/7.5vw;
        margin-right: 65/7.5vw;
        color: #333;
      }
    }
  }
}
.map-right-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: fixed;
  right: 10/7.5vw;
  top: 118/7.5vw;
  width: 80/7.5vw;
  height: 400/7.5vw;
  padding: 10/7.5vw;
  border-radius: 6/7.5vw;
  background-color: #fff;
  box-sizing: border-box;
  color: #666;
  font-size: 20/7.5vw;
  z-index: 1;
  box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.3), -2px -2px 10px rgba(0, 0, 0, 0.3);
  > a {
    flex: 1;
    border-top: 1px solid #e6e6e6;
    &:nth-of-type(1) {
      border-top: 0;
      img {
        margin-bottom: 15/7.5vw;
      }
    }
    img {
      display: block;
      width: 40/7.5vw;
      margin: 0 auto;
      margin-top: 15/7.5vw;
      &.active {
        display: none;
      }
    }
    &.active {
      img {
        display: none;
        &.active {
          display: block;
        }
      }
    }
  }
}
</style>